பக்கத் தெரிவுநிலை API: உலகளவில் இணைய செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்துதல்

இன்றைய மாறும் இணையச் சூழலில், பயனர்கள் ஒரே நேரத்தில் பல உலாவி டேப்களைக் கையாளுகிறார்கள். இது உருவாக்குநர்களுக்கு ஒரு தனித்துவமான சவாலை அளிக்கிறது: ஒரு டேப் செயலில் இல்லாதபோதும், இணையதளத்தின் உகந்த செயல்திறனையும் தடையற்ற பயனர் அனுபவத்தையும் எப்படி உறுதி செய்வது? இந்தப் பிரச்சனைக்கு பக்கத் தெரிவுநிலை API (Page Visibility API) ஒரு சக்திவாய்ந்த தீர்வை வழங்குகிறது. இது உருவாக்குநர்களை வளப் பயன்பாட்டை புத்திசாலித்தனமாக நிர்வகிக்கவும், ஒரு வலைப்பக்கத்தின் தெரிவுநிலை நிலையைப் பொறுத்து இணையதளத்தின் நடத்தையை மாற்றியமைக்கவும் உதவுகிறது.

பக்கத் தெரிவுநிலை API என்றால் என்ன?

பக்கத் தெரிவுநிலை API என்பது ஒரு உலாவி API ஆகும். இது ஒரு வலைப்பக்கம் பயனருக்கு தற்போது தெரிகிறதா இல்லையா என்பதைக் கண்டறிய வலை உருவாக்குநர்களை அனுமதிக்கிறது. ஒரு பக்கம் முன்புற டேப் அல்லது சாளரத்தில் இருக்கும்போது அது தெரியும் எனக் கருதப்படுகிறது. மாறாக, ஒரு பக்கம் பின்னணி டேப், சிறிதாக்கப்பட்ட சாளரம் அல்லது பூட்டப்பட்ட திரையில் இருக்கும்போது அது மறைக்கப்பட்டது எனக் கருதப்படுகிறது.

இந்த API இரண்டு முதன்மை அம்சங்களை வழங்குகிறது:

• `document.visibilityState` பண்பு: ஆவணத்தின் தற்போதைய தெரிவுநிலை நிலையைத் தருகிறது. சாத்தியமான மதிப்புகள் பின்வருமாறு:
• `visible`: பக்கம் முன்புற டேப் அல்லது சாளரத்தில் உள்ளது.
• `hidden`: பக்கம் பின்னணி டேப், சிறிதாக்கப்பட்ட சாளரம் அல்லது பூட்டப்பட்ட திரையில் உள்ளது.
• `prerender`: பக்கம் முன்கூட்டியே வழங்கப்படுகிறது ஆனால் இன்னும் தெரியவில்லை.
• `unloaded`: பக்கம் நினைவகத்திலிருந்து வெளியேற்றப்படுகிறது.
• `visibilitychange` நிகழ்வு: ஆவணத்தின் தெரிவுநிலை நிலை மாறும்போதெல்லாம் தூண்டப்படும் ஒரு நிகழ்வு.

பக்கத் தெரிவுநிலை API ஏன் முக்கியமானது?

பக்கத் தெரிவுநிலை API பயனர்கள் மற்றும் உருவாக்குநர்கள் இருவருக்கும் குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

மேம்படுத்தப்பட்ட இணைய செயல்திறன்

ஒரு பக்கம் எப்போது தெரியும் என்பதைப் புரிந்துகொள்வதன் மூலம், உருவாக்குநர்கள் வளப் பயன்பாட்டை மேம்படுத்தலாம். ஒரு பக்கம் மறைக்கப்பட்டிருக்கும்போது, இதுபோன்ற வளம்-தீவிர பணிகளைத் தொடர்ந்து செய்வது பெரும்பாலும் தேவையற்றது:

• அடிக்கடி தரவு வினவல்: சேவையகத்திற்கான AJAX கோரிக்கைகளை நிறுத்துதல் அல்லது அதிர்வெண்ணைக் குறைத்தல்.
• அனிமேஷன் ரெண்டரிங்: அனிமேஷன்களை இடைநிறுத்துதல் அல்லது அவற்றின் பிரேம் விகிதத்தைக் குறைத்தல்.
• காணொளி இயக்கம்: காணொளி இயக்கத்தை இடைநிறுத்துதல் அல்லது காணொளியின் தரத்தைக் குறைத்தல்.
• கனமான கணக்கீடுகள்: சிக்கலான கணக்கீடுகள் அல்லது தரவு செயலாக்கத்தை இடைநிறுத்துதல்.

இது CPU பயன்பாடு, நினைவக நுகர்வு மற்றும் நெட்வொர்க் அலைவரிசையைக் குறைக்கிறது. இதனால், குறிப்பாக மொபைல் சாதனங்களில், வேகமான ஏற்றுதல் நேரம், மென்மையான செயல்திறன் மற்றும் மேம்பட்ட பேட்டரி ஆயுள் கிடைக்கிறது.

மேம்படுத்தப்பட்ட பயனர் அனுபவம்

இந்த API உருவாக்குநர்களை தெரிவுநிலையின் அடிப்படையில் பயனர் அனுபவத்தை மாற்றியமைக்க அனுமதிக்கிறது. உதாரணமாக:

• அறிவிப்புகள்: மறைக்கப்பட்ட டேப் மீண்டும் தெரியும் போது அறிவிப்புகளைக் காண்பித்தல்.
• முன்னேற்றக் குறிகாட்டிகள்: தெரிவுநிலையின் அடிப்படையில் முன்னேற்றக் குறிகாட்டிகளை இடைநிறுத்துதல் அல்லது தொடங்குதல்.
• பயனர் முன்னேற்றத்தைச் சேமித்தல்: தரவு இழப்பைத் தடுக்க பக்கம் மறைக்கப்படும்போது பயனர் முன்னேற்றத்தை தானாகவே சேமித்தல்.

இந்த மேம்பாடுகள் பயனரின் சாதனம் அல்லது நெட்வொர்க் நிலைமைகளைப் பொருட்படுத்தாமல், மிகவும் பதிலளிக்கக்கூடிய மற்றும் பயனர் நட்பு இணையதளத்திற்கு பங்களிக்கின்றன.

வள மேம்படுத்தல்

திறமையான வள மேலாண்மைக்கு பக்கத் தெரிவுநிலை API மிகவும் முக்கியமானது, குறிப்பாக ஒற்றைப்-பக்க பயன்பாடுகள் (SPAs) மற்றும் பின்னணிப் பணிகளைச் செய்யும் இணையப் பயன்பாடுகளில் இது முக்கியம். ஒரு டேப் மறைக்கப்பட்டிருக்கும்போது தேவையற்ற செயல்பாடுகளை நிறுத்துவதன் மூலம், இந்த API மற்ற பயன்பாடுகள் மற்றும் பணிகளுக்காக கணினி வளங்களை விடுவிக்கிறது, இது ஒட்டுமொத்த கணினி செயல்திறனை மேம்படுத்துகிறது.

பக்கத் தெரிவுநிலை API-ஐப் பயன்படுத்துவது எப்படி

பக்கத் தெரிவுநிலை API-ஐப் பயன்படுத்துவது மிகவும் எளிது. இதோ ஒரு அடிப்படை உதாரணம்:

// ஆரம்ப தெரிவுநிலை நிலையைச் சரிபார்க்கவும்
if (document.visibilityState === "visible") {
  // பக்கம் தெரிகிறது, பணிகளைத் தொடங்கவும் அல்லது தொடரவும்
  startTasks();
} else {
  // பக்கம் மறைக்கப்பட்டுள்ளது, பணிகளை இடைநிறுத்தவும்
  pauseTasks();
}

// தெரிவுநிலை மாற்ற நிகழ்வுகளைக் கவனிக்கவும்
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // பக்கம் தெரிகிறது, பணிகளைத் தொடங்கவும் அல்லது தொடரவும்
    startTasks();
  } else {
    // பக்கம் மறைக்கப்பட்டுள்ளது, பணிகளை இடைநிறுத்தவும்
    pauseTasks();
  }
});

function startTasks() {
  console.log("Starting tasks...");
  // வளம்-தீவிர பணிகளைத் தொடங்க உங்கள் குறியீடு இங்கே
}

function pauseTasks() {
  console.log("Pausing tasks...");
  // வளம்-தீவிர பணிகளை இடைநிறுத்த உங்கள் குறியீடு இங்கே
}

இந்தக் குறியீட்டுத் துணுக்கு ஆரம்ப தெரிவுநிலை நிலையை எப்படிச் சரிபார்ப்பது மற்றும் `visibilitychange` நிகழ்வுகளைக் கவனித்து அதற்கேற்ப பணிகளைத் தொடங்குவது அல்லது இடைநிறுத்துவது எப்படி என்பதைக் காட்டுகிறது.

நடைமுறை உதாரணங்கள் மற்றும் பயன்பாட்டு வழக்குகள்

பல்வேறு சூழ்நிலைகளில் பக்கத் தெரிவுநிலை API-ஐ எப்படிப் பயன்படுத்தலாம் என்பதற்கான சில நடைமுறை உதாரணங்களைப் பார்ப்போம்:

உதாரணம் 1: காணொளி இயக்கத்தை மேம்படுத்துதல்

ஒரு காணொளி ஸ்ட்ரீமிங் இணையதளத்தைக் கருத்தில் கொள்ளுங்கள். ஒரு பயனர் மற்றொரு டேபிற்கு மாறும்போது, பின்னணியில் காணொளியைத் தொடர்ந்து பஃபர் செய்வது அல்லது இயக்குவது அவசியமில்லை.

const videoElement = document.getElementById("myVideo");

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // பக்கம் தெரிகிறது, காணொளி இயக்கத்தைத் தொடரவும்
    videoElement.play();
  } else {
    // பக்கம் மறைக்கப்பட்டுள்ளது, காணொளி இயக்கத்தை இடைநிறுத்தவும்
    videoElement.pause();
  }
});

இந்தக் குறியீடு டேப் மறைக்கப்பட்டிருக்கும்போது காணொளியை இடைநிறுத்துகிறது, இது அலைவரிசை மற்றும் CPU வளங்களைச் சேமிக்கிறது.

உதாரணம் 2: தரவு வினவல் அதிர்வெண்ணைக் குறைத்தல்

பல இணையப் பயன்பாடுகள் சமீபத்திய தகவல்களுடன் புதுப்பித்த நிலையில் இருக்க அடிக்கடி தரவு வினவலைச் சார்ந்துள்ளன. இருப்பினும், பயனர் பக்கத்தை செயலில் பார்க்காதபோது இது வீணாகிறது.

let pollingInterval;

function startPolling() {
  pollingInterval = setInterval(function() {
    // சேவையகத்திலிருந்து தரவைப் பெற உங்கள் குறியீடு
    fetchData();
  }, 5000); // ஒவ்வொரு 5 வினாடிக்கும் வினவவும்
}

function stopPolling() {
  clearInterval(pollingInterval);
}


document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // பக்கம் தெரிகிறது, வினவலைத் தொடங்கவும்
    startPolling();
  } else {
    // பக்கம் மறைக்கப்பட்டுள்ளது, வினவலை நிறுத்தவும்
    stopPolling();
  }
});

// பக்கம் ஆரம்பத்தில் தெரிந்தால் வினவலைத் தொடங்கவும்
if (document.visibilityState === "visible") {
    startPolling();
}

function fetchData() {
  // உங்கள் உண்மையான தரவு பெறும் தர்க்கத்துடன் மாற்றவும்
  console.log("Fetching data...");
}

இந்தக் குறியீடு டேப் மறைக்கப்பட்டிருக்கும்போது தரவு வினவலை நிறுத்துகிறது மற்றும் டேப் மீண்டும் தெரியும் போது அதைத் தொடர்கிறது.

உதாரணம் 3: விளையாட்டு சுழற்சிகளை இடைநிறுத்துதல்

இணைய அடிப்படையிலான விளையாட்டுகளுக்கு, தேவையற்ற CPU பயன்பாடு மற்றும் பேட்டரி வீணாவதைத் தடுக்க, பயனர் மற்றொரு டேபிற்கு மாறும்போது விளையாட்டு சுழற்சியை இடைநிறுத்துவது அவசியம்.

let gameLoopInterval;

function startGameLoop() {
  gameLoopInterval = setInterval(gameLoop, 16); // 60 FPS
}

function stopGameLoop() {
  clearInterval(gameLoopInterval);
}

function gameLoop() {
  // உங்கள் விளையாட்டு தர்க்கம் இங்கே
  console.log("Game loop running...");
}


document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // பக்கம் தெரிகிறது, விளையாட்டு சுழற்சியைத் தொடங்கவும்
    startGameLoop();
  } else {
    // பக்கம் மறைக்கப்பட்டுள்ளது, விளையாட்டு சுழற்சியை நிறுத்தவும்
    stopGameLoop();
  }
});

// பக்கம் ஆரம்பத்தில் தெரிந்தால் விளையாட்டு சுழற்சியைத் தொடங்கவும்
if (document.visibilityState === "visible") {
    startGameLoop();
}

இந்தக் குறியீடு டேப் மறைக்கப்பட்டிருக்கும்போது விளையாட்டு சுழற்சியை இடைநிறுத்துகிறது, இது விளையாட்டு பின்னணியில் வளங்களைப் பயன்படுத்துவதைத் தடுக்கிறது.

உதாரணம் 4: பயனர் தரவை தானாக சேமித்தல்

தரவு இழப்பைத் தடுக்க, பக்கம் மறைக்கப்படும்போது பயன்பாடுகள் பயனர் தரவை தானாக சேமிக்க முடியும்.

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // பக்கம் மறைக்கப்பட்டுள்ளது, பயனர் தரவைச் சேமிக்கவும்
    saveUserData();
  }
});

function saveUserData() {
  // பயனர் தரவை லோக்கல் ஸ்டோரேஜ் அல்லது சேவையகத்தில் சேமிக்க உங்கள் குறியீடு
  console.log("Saving user data...");
}

பயனர் தற்செயலாக டேபை மூடினாலும் அல்லது பக்கத்திலிருந்து வெளியேறினாலும் பயனர் முன்னேற்றம் சேமிக்கப்படுவதை இது உறுதி செய்கிறது.

உலாவி இணக்கத்தன்மை

பக்கத் தெரிவுநிலை API ஆனது Chrome, Firefox, Safari, Edge, மற்றும் Opera உள்ளிட்ட நவீன உலாவிகளால் பரவலாக ஆதரிக்கப்படுகிறது. சமீபத்திய தகவல்களுக்கு MDN வலை ஆவணங்கள் இணையதளத்தில் உள்ள இணக்கத்தன்மை அட்டவணையை நீங்கள் சரிபார்க்கலாம்.

API-ஐ ஆதரிக்காத பழைய உலாவிகளுக்கு, ஒரு பாலிஃபில்லை (polyfill) மாற்றுச் செயலாக்கத்தை வழங்க பயன்படுத்தலாம். இருப்பினும், பாலிஃபில்கள் நேட்டிவ் API போல துல்லியமாகவோ அல்லது திறமையாகவோ இருக்காது.

பக்கத் தெரிவுநிலை API-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

பக்கத் தெரிவுநிலை API-ஐப் பயன்படுத்தும்போது மனதில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• அதிகப்படியான மேம்படுத்தலைத் தவிர்க்கவும்: தெரிவுநிலை நிலையின் அடிப்படையில் குறியீட்டை முன்கூட்டியே மேம்படுத்த வேண்டாம். மிகவும் வளம்-தீவிரமான பணிகளைக் கண்டறிய உங்கள் பயன்பாட்டை சுயவிவரப்படுத்தி, முதலில் அவற்றை மேம்படுத்துவதில் கவனம் செலுத்துங்கள்.
• தெரிவுநிலை மாற்றங்களை Debounce அல்லது Throttle செய்யவும்: அதிகப்படியான நிகழ்வு கையாளுதலைத் தவிர்க்க, `visibilitychange` நிகழ்வை debounce அல்லது throttle செய்வதைக் கருத்தில் கொள்ளுங்கள்.
• முழுமையாகச் சோதிக்கவும்: பக்கத் தெரிவுநிலை API சரியாகச் செயல்படுகிறதா என்பதை உறுதிப்படுத்த, உங்கள் பயன்பாட்டை வெவ்வேறு உலாவிகள் மற்றும் வெவ்வேறு சாதனங்களில் சோதிக்கவும்.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: பக்கத் தெரிவுநிலை API-ன் உங்கள் பயன்பாடு அணுகல்தன்மையை எதிர்மறையாகப் பாதிக்காது என்பதை உறுதிப்படுத்தவும். உதாரணமாக, பக்கம் மறைக்கப்படும்போது இடைநிறுத்தப்பட்ட அல்லது முடக்கப்பட்ட தகவல்கள் அல்லது அம்சங்களை பயனர்கள் அணுகுவதற்கு மாற்று வழிகளை வழங்கவும்.
• தெளிவான பின்னூட்டம் வழங்கவும்: தெரிவுநிலை நிலையின் அடிப்படையில் பணிகள் இடைநிறுத்தப்படும்போதும் மீண்டும் தொடங்கும்போதும் பயனர்களுக்குத் தெரியப்படுத்துங்கள். இது குழப்பத்தைத் தடுக்கவும், பயனர் அனுபவத்தை மேம்படுத்தவும் உதவும். உதாரணமாக, ஒரு முன்னேற்றப் பட்டி டேப் மறைக்கப்படும்போது இடைநிறுத்தப்பட்டு, அது மீண்டும் தெரியும் போது தொடரலாம்.

இணைய செயல்திறன் மற்றும் பக்கத் தெரிவுநிலை API-ன் எதிர்காலம்

இணையப் பயன்பாடுகள் பெருகிய முறையில் சிக்கலானதாகவும், வளம்-தீவிரமானதாகவும் மாறிவருவதால், இணைய செயல்திறனை மேம்படுத்துவதிலும், பயனர் அனுபவத்தை மேம்படுத்துவதிலும் பக்கத் தெரிவுநிலை API தொடர்ந்து முக்கியப் பங்கு வகிக்கும். எதிர்கால மேம்பாடுகளில் பின்வருவன அடங்கும்:

• மிக நுணுக்கமான தெரிவுநிலை நிலைகள்: ஒரு பக்கத்தின் தெரிவுநிலை நிலை பற்றிய மேலும் நுணுக்கமான தகவல்களை வழங்க API விரிவாக்கப்படலாம். உதாரணமாக, அது பகுதியளவு மறைக்கப்பட்டுள்ளதா அல்லது மற்ற கூறுகளால் மூடப்பட்டுள்ளதா என்பது போன்றவை.
• மற்ற API-களுடன் ஒருங்கிணைப்பு: மேலும் அதிநவீன வள மேலாண்மை திறன்களை வழங்க, இந்த API, செயலற்ற கண்டறிதல் API (Idle Detection API) போன்ற மற்ற உலாவி API-களுடன் ஒருங்கிணைக்கப்படலாம்.
• மேம்படுத்தப்பட்ட பாலிஃபில்கள்: பழைய உலாவிகளுக்கு ஆதரவை வழங்க மேலும் துல்லியமான மற்றும் திறமையான பாலிஃபில்கள் உருவாக்கப்படலாம்.

முடிவுரை

பக்கத் தெரிவுநிலை API என்பது இணையதள செயல்திறனை மேம்படுத்தவும், வளப் பயன்பாட்டைக் குறைக்கவும், மற்றும் பயனர் அனுபவத்தை மேம்படுத்தவும் விரும்பும் வலை உருவாக்குநர்களுக்கு ஒரு மதிப்புமிக்க கருவியாகும். ஒரு பக்கம் எப்போது தெரிகிறது அல்லது மறைக்கப்படுகிறது என்பதைப் புரிந்துகொள்வதன் மூலம், உருவாக்குநர்கள் வளம்-தீவிரமான பணிகளை புத்திசாலித்தனமாக நிர்வகிக்கலாம், பயனர் அனுபவத்தை மாற்றியமைக்கலாம், மற்றும் பயனரின் சாதனம் அல்லது நெட்வொர்க் நிலைமைகளைப் பொருட்படுத்தாமல் தங்கள் இணையதளங்கள் பதிலளிக்கக்கூடியதாகவும் திறமையாகவும் இருப்பதை உறுதிசெய்யலாம். பக்கத் தெரிவுநிலை API-ஐ ஏற்றுக்கொள்வதன் மூலம், நீங்கள் அனைவருக்கும் ஒரு நிலையான மற்றும் பயனர் நட்பு வலையை உருவாக்க முடியும்.

நிலையான நடத்தை மற்றும் உகந்த செயல்திறனை உறுதிப்படுத்த உங்கள் செயலாக்கத்தை பல்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதிக்க நினைவில் கொள்ளுங்கள். சிறந்த நடைமுறைகளைப் பின்பற்றி, இணைய செயல்திறன் மேம்படுத்தலில் சமீபத்திய முன்னேற்றங்களைப் பற்றித் தெரிந்துகொள்வதன் மூலம், உலகெங்கிலும் உள்ள உங்கள் பயனர்களுக்கு விதிவிலக்கான இணைய அனுபவங்களை வழங்க பக்கத் தெரிவுநிலை API-ன் சக்தியை நீங்கள் பயன்படுத்திக் கொள்ளலாம்.